@import vars
@import fonts
@import libs

::placeholder
	color: #666

::selection
	background-color: $accent
	color: #fff

input, textarea
	outline: none
	&:focus:required:invalid
		border-color: red
	&:required:valid
		border-color: green

body
	font-size: 14px
	//min-width: 375px
	position: relative
	line-height: 1.65
	font-family: 'Roboto', sans-serif
	overflow-x: hidden
	color: $colorWhite
	margin: 0 auto
	display: grid
	grid-template-columns: 1fr
	grid-template-rows: repeat(3, auto)


.maxWidth
	max-width: 1440px
	min-width: 320px
	margin: 0 auto
	padding: 0 78px
	+media-breakpoint-between(xs, 1156px)
		padding: 0 40px
// Custom Sass / Remove before use

header
	background: url("../img/_src/bg-curvy-desktop.svg") no-repeat bottom center
	background-size: contain
	background-color: $colorDarkBlueIntro
	padding-bottom: 160px
	.maxWidth
		display: grid
		margin-top: 70px
		.headerFix
			display: grid
			grid-template-columns: repeat(2, 1fr)
			margin-bottom: 74px
			.menu ul
				display: flex
				list-style: none
				justify-content: flex-end
				li
					padding-right: 55px
					>a
						color: $colorWhite
						&:hover
							color: $colorDarkBlueMain
							text-decoration: none
							border: 1px solid $colorWhite
							padding: 7px 15px
							background-color: $colorWhite
							border-radius: 40px
							transform: scale(0)
							transition: all .3s ease
			+media-breakpoint-between(xs, 1156px)
				grid-template-columns: 34% 66%
			+media-breakpoint-down(xs)
				grid-template-columns: 1fr
				.menu ul
					margin-top: 30px
					justify-content: space-between
					padding-inline-start: 0
					li
						padding-right: 10px
		.headerIntro
			display: grid
			grid-template-columns: minmax(auto, 700px)
			grid-row-gap: 40px
			justify-content: center
			text-align: center
			img
				object-fit: cover
				width: 100%
				height: auto
			h1
				font-size: 2.5rem
			button
				width: 280px
				background-color: $colorAccentBlue
				border: none
				border-radius: 40px
				padding: 22px
				color: $colorWhite
				font-weight: bold
				justify-self: center
				&:hover
					background-color: $colorAccentCyan
					transition: all .3s ease-in
			+media-breakpoint-between(xs, md)
				grid-template-columns: 1fr
				h1
					font-size: 2rem
				p
					font-size: 1.4rem
				button
					font-size: 1.4rem
			+media-breakpoint-down(xs)
				grid-template-columns: 1fr
				h1
					font-size: 1.8rem
				p
					font-size: 1.1rem
main
	background-color: $colorDarkBlueMain
	display: grid
	grid-template-rows: repeat(3, auto)
	grid-row-gap: 130px
	justify-items: center
	.mainBlock
		display: grid
		grid-template-columns: repeat(auto-fill, minmax(auto, 360px))
		max-width: 100vw
		text-align: center
		grid-row-gap: 90px
		grid-column-gap: 70px
		.item1
			display: grid
			grid-row-gap: 30px
			justify-items: center
			&:hover
				transform: scale(1.2)
		+media-breakpoint-between(xs, md)
			max-width: none
			grid-template-columns: 1fr
			.item1
				font-size: 1.4rem
				h3
					font-size: 1.8rem
		+media-breakpoint-down(xs)
			.item1
				font-size: 1.1rem
				h3
					font-size: 1.6rem
	.productive
		display: grid
		grid-template-columns: repeat(2, minmax(auto, 550px))
		grid-column-gap: 50px
		.blockProd1 img
			width: 100%
			height: auto
			margin: 0 auto
		.blockProd2
			align-self: center
		h2
			max-width: 340px
			font-size: 2rem
		a
			color: $colorAccentCyan
			border-bottom: 1px $colorAccentCyan solid
			&:hover
				color: $colorAccentBlue
				text-decoration: none
				border-bottom: 1px $colorAccentBlue solid
		+media-breakpoint-between(xs, md)
			grid-template-columns: 1fr
			.blockProd1
				margin-bottom: 30px
			.blockProd2
				text-align: center
			h2
				max-width: none
				padding: 30px 10px
				font-size: 2.5rem
			p
				font-size: 1.4rem
			a
				font-size: 1.4rem
		+media-breakpoint-down(xs)
			.blockProd2
				h2
					font-size: 1.8rem
				p
					font-size: 1.1rem
				a
					font-size: 1.1rem
	.mainComment
		display: grid
		grid-template-columns: repeat(auto-fit, minmax(auto, 360px))
		grid-column-gap: 40px
		grid-row-gap: 40px
		padding-bottom: 200px
		padding-top: 50px
		background: url("../img/_src/bg-quotes.png") no-repeat 5.5% 4%
		article
			background: $colorDarkBlueTM
			padding: 45px 27px 27px
			border-radius: 5px
			&:hover
				box-shadow: 0 0 15px 2px lighten($colorDarkBlueTM, 20%)
				transform: scale(1.1)
			.blockName
				display: grid
				grid-template-columns: 30px 1fr
				grid-template-rows: 30px
				align-self: center
				.nameImg
					width: 30px
					img
						width: 27px
						border-radius: 50%
					+media-breakpoint-between(xs, md)
						width: 50px
						img
							width: 50px
					+media-breakpoint-down(xs)
						img
							width: 30px
				.nameDescription
					font-size: .6rem
					p
						margin: 0
						&:first-child
							font-weight: 700
					+media-breakpoint-between(xs, md)
						p
							font-size: 1rem
					+media-breakpoint-down(xs)
						p
							font-size: .7rem
				+media-breakpoint-between(xs, md)
					grid-column-gap: 30px
				+media-breakpoint-down(xs)
					grid-column-gap: 10px
		+media-breakpoint-between(xs, md)
			grid-template-columns: 1fr
			justify-content: center
			background: url("../img/_src/bg-quotes.png") no-repeat 3% 2.5%
			article > p
				font-size: 1.4rem
		+media-breakpoint-down(xs)
			article > p
				font-size: 1rem
footer
	background-color: $colorDarkBlueFooter
	font-size: .8rem
	.blockSubscription
		position: relative
		top: -13vh
		max-width: 50vw
		background: hsl(219, 30%, 18%)
		border-radius: 10px
		padding: 30px 50px
		text-align: center
		margin: 0 auto
		h2
			font-size: 1.9rem
			margin-bottom: 20px
		p
			font-size: .75rem
		input
			width: 60%
			border-radius: 40px
			border: none
			padding: 8px 25px
			margin-right: 20px
			&:focus
				background: lighten($colorAccentCyan, 20%)
		button
			font-weight: bold
			background: $colorAccentBlue
			color: $colorWhite
			border-radius: 40px
			border: none
			padding: 8px 25px
			&:hover
				background-color: $colorAccentCyan
				transition: all .3s ease-in
			+media-breakpoint-between(xs, 1156px)
				margin-top: 10px
		+media-breakpoint-between(xs, 1156px)
			padding: 20px
			h2
				font-size: 1.5rem
			input
				padding: 10px 15px
				width: 90%
				margin: 0 auto
			button
				width: 90%
		+media-breakpoint-between(xs, md)
			max-width: 100vw
			top: -22vh
			font-size: 1.4rem
			h2
				font-size: 2rem
			p
				font-size: 1.2rem
		+media-breakpoint-down(xs)
			font-size: 1rem
			h2
				font-size: 1.8rem
			p
				font-size: 1rem
	.footerLogo
		margin-bottom: 40px
		+media-breakpoint-between(xs, md)
			text-align: center
	.blockFooter
		display: grid
		grid-template-columns: 1fr 200px 1fr 150px
		grid-column-gap: 60px
		.location
			display: grid
			grid-template-columns: 30px 1fr
		.contacts
			display: grid
			grid-template-columns: 30px 1fr
			align-self: center
			a
				text-decoration: none
				color: $colorWhite
				&::after
					content: ""
					display: block
					position: relative
					width: 20%
					color: $colorAccentCyan
					border-bottom: 2px solid $colorAccentCyan
					transform: scale(0)
					transition: all .3s ease-out
					transform-origin: left
				&:hover
					color: $colorAccentCyan
					&::after
						transform: scale(1)
		.footerMenu
			ul
				display: grid
				grid-template-columns: repeat(2, 1fr)
			li
				display: inline-block
				list-style: none
				margin-bottom: 10px
				padding-right: 20px
				&::after
					content: ""
					display: block
					position: relative
					width: 20%
					color: $colorAccentCyan
					border-bottom: 2px solid $colorAccentCyan
					transform: scale(0)
					transition: all .3s ease-out
					transform-origin: left
				&:hover::after
					transform: scale(1)
				a
					color: $colorWhite
					text-decoration: none
					&:hover
						color: $colorAccentCyan
						font-weight: bold
		+media-breakpoint-between(xs, md)
			grid-template-columns: 1fr
			grid-row-gap: 40px
			justify-items: center
			ul
				grid-template-columns: 1fr
				grid-column-gap: 40px
			.location
				text-align: center
				font-size: 1.4rem
			.contacts, .footerMenu
				font-size: 1.4rem
		+media-breakpoint-down(xs)
			.location, .contacts, .footerMenu
				font-size: 1rem
		.socials
			display: flex
			svg
				width: 30px
				fill: $colorWhite
				&:hover
					transform: scale(1.3)
					fill: $colorAccentCyan
			+media-breakpoint-between(xs, md)
				svg
					width: 60px
			+media-breakpoint-down(xs)
				svg
					width: 40px
					margin-right: 20px
.attribution
	margin-top: 50px

//.container
//	max-width: 700px
//	padding:
//		right: $gutter/2
//		left: $gutter/2
//	margin:
//		left: auto
//		right: auto
//
//.img-responsive
//	display: block
//	max-width: 100%
//	height: auto
//
//.example-grid
//	display: grid
//	grid-gap: $gutter
//	grid-template-columns: 1fr 1fr
//	grid-template-areas: "left right"
//	> div:first-child
//		grid-area: left
//	> div:last-child
//		grid-area: right
//	+media-breakpoint-down(xs)
//		display: block
//		> div
//			padding: $gutter/2 0


.parent // Lazy Load Placeholder Generator: https://webdesign-master.ru/services/lazy/
	background-image: url()
